<template>
  <div class="form-popover">
    <el-popover
        :trigger="trigger"
        :placement="placement"
        :width="width"
        :title="title"
        :form="form"
        :inline="inline"
    >
      <el-form :inline="inline" :model="form" ref="formRef" size="mini" label-position="left" >
        <slot name="form"></slot>
      </el-form>
      <div slot="reference" id="reference">
        <slot></slot>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "FormPopover",
  props: {
    trigger: {
      type: String,
      default: 'hover'
    },
    placement: {
      type: String,
      default: 'bottom'
    },
    width: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: String | Number,
      default: 150
    },
    title: String,
    form: {},
    inline: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    reset() {
      this.$refs['formRef'].resetFields();
    }
  }
}
</script>

<style scoped>

</style>
